<template>
    <div class="content">
        <el-form>
            <table width="100%">
                <tbody>
                <tr>
                    <th><em class="red">*</em> 作品分类：</th>
                    <td>
                        <el-cascader
                                props.expandTrigger="hover"
                                v-model="addForm.selectedKeys"
                                :options="parentCateList"
                                :props="cascaderProps"
                                clearable
                                @change="handleChange">
                        </el-cascader>
                    </td>
                </tr>
                <tr>
                    <th><em class="red">*</em> 作品名称：</th>
                    <td>
                        <el-input type="text" v-model="addForm.workName"></el-input>
                    </td>
                </tr>
                <tr >
                    <th><em class="red">*</em> 作品类型：</th>
                    <td>
                        <el-radio-group  style="margin-top: 35px" v-model="addForm.workFileType">
                            <el-radio :label="0">视频</el-radio>
                            <el-radio :label="1">图片</el-radio>
                        </el-radio-group>
                    </td>
                </tr>
                <tr>
                    <th><em class="red">*</em> 点击上传作品</th>
                    <el-upload :auto-upload="false" style="margin-top: 20px" action=""
                               :on-change="uploadWorkFile">
                        <el-button type="primary"
                                   v-if="fileURL === 'http://127.0.0.1:8081/img/worksFile/上传.png'">上传文件
                        </el-button>
                        <img :src="imgUrl+fileURL" v-else style="width: 50%">
                    </el-upload>
                </tr>
                <tr>
                    <th><em class="red">*</em> 点击上传封面</th>
                    <el-upload :auto-upload="false" style="margin-top: 20px" action=""
                               :on-change="uploadPoster">
                        <el-button type="primary"
                                   v-if="posterURL === 'http://127.0.0.1:8081/img/worksFile/上传.png'">
                        </el-button>
                        <img :src="imgUrl+posterURL" v-else style="width: 50%;">
                    </el-upload>
                </tr>
                </tbody>
            </table>
            <el-button type="primary" style="margin-top: 20px;margin-left: 300px;" @click="add(workName)">立即发布</el-button>
        </el-form>
    </div>
</template>

<script setup>
  import {getAllCategory} from "../assets/api/categoryApi";
  import {addWork} from "../assets/api/workInfoApi";
  import store from "@/store/index.js";
  import {getCurrentInstance, onBeforeMount, ref} from "vue";
  import {ElMessage} from "element-plus";
  import {useRouter} from "vue-router";
  
  const router = useRouter();
  const imgUrl = getCurrentInstance()?.appContext.config.globalProperties.$imgUrl
  
  const name = "formPusher";
  const fileList2 = ref([]);
  const fileURL = ref(store.state.Host + '/img/worksFile/上传.png');
  const posterURL = ref(store.state.Host + '/img/worksFile/上传.png');
  const workFilename = ref('');
  const poster = ref('');
  const activeIndex = ref(0);
  const pageNum = ref(1);
  const pageSize = ref(5);
  const addForm = ref({});
  const workName = ref('');
  const addFormRules = ref({
    workName: [{required: true, message: '请输入作品名称', trigger: 'blur'}],
    selectedKeys: [{required: true, message: '请选择作品分类', trigger: 'change'}]
  });
  const selectedKeys = ref([]);
  const parentCateList = ref([]);
  const cascaderProps = ref({
    value: 'categoryId',
    label: 'categoryName',
    children: 'children'
  });
  
  onBeforeMount(() => {
    getCategoryList()
  });
  
  const uploadPoster = (file) => {
    poster.value = file.raw.value
  };
  const uploadWorkFile = (file) => {
    workFilename.value = file.raw.value
  };
  const handleChange = () => {
    addForm.rootCategoryId.value = selectedKeys[0].value;
  };
  const getCategoryList = () => {
    let data = {};
    data.categoryLevel = 0;
    getAllCategory(pageNum, pageSize, data).then(res => {
      parentCateList.value = res.data.records;
    })
  };
  const add = () => {
    let data = new FormData()
    data.append('file', workFilename.value)
    data.append('posterFile', poster.value)
    data.append('categoryId', addForm.selectedKeys[1].value);
    data.append('username', localStorage.getItem('username'));
    data.append('workName', addForm.workName.value);
    data.append('workFileType', addForm.workFileType.value);
    addWork(data).then(res => {
      if (res.code !== 200) {
        return ElMessage.error(res.message);
      } else {
        ElMessage.success(res.message);
        router.push('/PersonalWorks');
      }
  
    })
  };
  
</script>

<style scoped>
    @import "../assets/css/formPusher.css";
</style>
